@import com.mgfireworks.mgplatform.mgadmin.product.model.*
@import com.mgfireworks.mgplatform.mgadmin.sys.model.*
@import cn.hn.java.summer.utils.JsonUtils
@args Boolean isEdit
@extends("/form_template",title=(isEdit?"修改产品":"添加产品"))
@args Product product,ProductDetail productDetail,List<Category> categoryList,List<Band> bandList,List<SellLevel> sellLevelList
@{
	if(product==null){
		product=new Product();
	}
	if(productDetail==null){
		productDetail=new ProductDetail();
	}
}
       <div class="x_content">
           <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
               <div class="panel">
                   <a id="headingOne" class="panel-heading x_title" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                       <h4 class="panel-title">基本信息<sub>(请填完基本信息保存后再继续修改)</sub></h4>
                   </a>
                   <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                       <f_input name="productId" text="产品编号" value="@product.getProductId()" placeholder="自动生成" readonly="readonly"></f_input>
                       <f_input name="productName" text="产品名" value="@product.getProductName()" required="true"></f_input>
                       <div class="form-group">
                           <label class="control-label col-md-3 col-sm-3 col-xs-12" for="categoryName">类别</label>
                           <div class="col-md-6 col-sm-6 col-xs-12">
                               <div id="jsProductCateTree"></div>
                           </div>
                       </div>

                       <f_select name="bandId" text="品牌" value="@product.getBandId()" required="true">
                           <option value="">请选择品牌</option>
						   @if(bandList){
						   @for(Band b : bandList){
                           <option value="@b.getBandId()">@b.getBandName()</option>
						   }}
                       </f_select>
                       <div class="form-group">
                           <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mainImg">主图片</label>
                           <div class="col-md-6 col-sm-6 col-xs-12">
                               <img class="product-main-img" src="@url("")@product.getMainImg()"/>
                               <div class="x_panel">
                                   <div class="x_title collapse-link">
                                       <button type="button" class="btn btn-primary btn-sm">上传图片</button>
                                       <ul class="nav navbar-right panel_toolbox">
                                           <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                       </ul>
                                       <div class="clearfix"></div>
                                   </div>
                                   <div class="x_content" style="display: none;">
                                       <input type="text" id="mainImg" name="mainImg" value="@product.getMainImg()" required="required" readonly="readonly" class="form-control col-md-7 col-xs-12">
                                       <div id="jsMainImgUpload" class="dropzone dz-clickable dz-started uploader-img"></div>
                                   </div>
                               </div>

                           </div>
                       </div>
                       <f_select name="sellLevel" text="销售级别" value="@product.getSellLevel()" required="true">
                           <option value="">请选择销售级别</option>
						   @if(sellLevelList){
						   @for(SellLevel s : sellLevelList){
                           <option value="@s.getLevel()">@s.getLevelName()</option>
						   }}
                       </f_select>
                       <f_radio name="recommend" value1="1" value2="0" value="@product.getRecommend()" text="是否推荐" text1="推荐" text2="不推荐" required="true"></f_radio>
				   </div>

                   <a id="headingTwo" class="panel-heading x_title" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                       <h4 class="panel-title">详细信息</h4>
                   </a>
                   <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
                       <f_textarea type="text" id="description" name="description" text="产品简要">@productDetail.getDescription()</f_textarea>
                       <div class="form-group">
                           <label class="control-label col-md-3 col-sm-3 col-xs-12" for="txtImages">详情图片</label>
                           <div class="col-md-6 col-sm-6 col-xs-12">
                               <div id="jsDetailImgList" class="row img-scale-list">
                                   <div class="col-xs-6 col-lg-3" style="display: none;">
                                       <a class="detail-imgs thumbnail">
                                           <img src="" />
                                       </a>
                                   </div>
                                   @for(String img : productDetail.getImageList()){
                                   <div class="col-xs-6 col-lg-3">
                                       <a class="detail-imgs thumbnail">
                                           <img src="@img" />
                                       </a>
                                   </div>
                                   }
                               </div>
                               <div class="x_panel">
                                   <div class="x_title collapse-link">
                                       <button type="button" class="btn btn-primary btn-sm">上传图片</button>
                                       <ul class="nav navbar-right panel_toolbox">
                                           <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                       </ul>
                                       <div class="clearfix"></div>
                                   </div>
                                   <div class="x_content" style="display: none;">
                                       <input type="text" id="txtImages" name="images" value="@productDetail.getImages()" readonly="readonly" class="form-control col-md-7 col-xs-12">
                                       <div id="jsDetailImgUpload" class="dropzone dz-clickable dz-started uploader-img"></div>
                                   </div>
                               </div>

                           </div>
                       </div>
                   </div>

                   <a id="headingThree" class="panel-heading x_title" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                       <h4 class="panel-title">其它信息</h4>
                   </a>
                   <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
                       规格等
                   </div>
			   </div>

		   </div>

       </div>
    @section(script){
       <script type="text/javascript">
       $(function(){
           //如果保存成功，则跳转到修改页面
           util.el.redirectIfSubmitSuccess("edit.html?productId=@product.getProductId()");

       	 var cateList=JSON.parse('@JsonUtils.toJson(categoryList)');
            var cateTree=util.el.genTreeData({
                data:cateList,
                rootText:"请选择",
                rootValue:"",
                dataParentId:"parentId",
                dataTextName:"cateName",
                dataValueName:"cateId",
                selectedNodeId:$("#jsCateId").val()
            });

           $("#jsProductCateTree").treeview({
               textName: "cateName",
               valueName: "cateId",
               depth: 2,
               selectedValue: "@product.getCateId()",
               required:true,
               remote: "list.json?parentId={0}",
               data: cateTree
           });

           //准备图片上传控件
            preparedUploadController("#jsMainImgUpload",1);
            preparedUploadController("#jsDetailImgUpload",5,function(url) {
                var imgItem=$("#jsDetailImgList>div:first").clone().show();
                $("#jsDetailImgList").append(imgItem);
                $("img",imgItem).prop("src",url);
           },1);

       });
       </script>
    }
       
